<script lang="ts" setup>
import {UnwrapRef} from "vue";
import {defaultClearShopGroundPrice, PlayerArea} from "@/Game/PlayerArea";
import {AllDishListDesc} from "@/Game/Dish";
import gsap from "gsap";
import {GameStage} from "@/Game/Game";
import {useAppStore} from "@/stores/app";

const appStore = useAppStore();
const {playerArea} = defineProps<{
    playerArea: UnwrapRef<PlayerArea>
}>();

const money = reactive({
    number: playerArea.moneyOwned
});
watch(() => playerArea.moneyOwned, (n: number) => {
    gsap.fromTo(money, {number: money.number}, {
        duration: Math.min(Math.abs(n - money.number) / 24, 0.8),
        number: n,
        ease: "none"
    });
});
const dishDiscardChanged = ref([false, false, false, false]);

for (let i = 0; i < playerArea.dishDiscardPile.length; i++) {
    watch(() => playerArea.dishDiscardPile[i], async (newValue: number, oldValue: number) => {
        if (newValue < oldValue && ((playerArea.playByHuman && playerArea.game.commonArea.customerQueueEnabled) || playerArea.game.gameStage == GameStage.PlayerTrimDish)) {
            dishDiscardChanged.value[i] = true;
            setTimeout(() => {
                dishDiscardChanged.value[i] = false;
            }, 1001);
        }
    });
}
</script>

<template>
    <div style="max-width: 100%; height: 100%; padding: 0.5rem; display: flex; gap: 0.5rem; position: relative;">
        <v-sheet :class="$style.sheet" :color="playerArea.trimDishEnabled ? 'rgba(var(--v-theme-warning), 0.2)' : undefined" :elevation="playerArea.trimDishEnabled ? 4: 0" border rounded style="height: 27.6rem; width: fit-content;">
            <div :class="$style['scroll-container']" style="width: fit-content;">
                <v-card :class="$style.card" color="surface-light" style="width: 12.4rem; height: 6rem;" title="雅阁">
                    <v-card-text>
                        数量：{{playerArea.dishDrawPile.length}}
                    </v-card-text>
                    <v-tooltip activator="parent" location="bottom start">初始数量是 6 张四品菜、2张三品菜</v-tooltip>
                </v-card>
                <v-card :class="$style.card" :elevation="playerArea.trimDishEnabled ? 4: 1" color="surface-light" style="width: 12.4rem; height: 12rem;" title="后厨">
                    <template v-slot:append>数量：{{playerArea.dishDiscardCount}}</template>
                    <v-card-text style="display: flex; flex-wrap: wrap; gap: 0.5rem; transition: box-shadow 0.4s ease;">
                        <v-chip v-for="(item, index) in AllDishListDesc" :key="index" :class="dishDiscardChanged[item.Class] ? $style.chipRotateX : ''" :color="item.Color" variant="elevated" @click="playerArea.trimDish(item.Class)">
                            <span style="margin-inline-start: -6px; font-size: 1rem;">{{item.Icon}}</span> <span style="width: 2.4ch; text-align: center;">{{playerArea.dishDiscardPile[item.Class]}}</span> <span :style="{visibility: playerArea.trimDishEnabled ? 'visible' : 'collapse'}" style="margin-inline-end: -6px; font-size: 1rem;">⛔</span>
                            <v-tooltip activator="parent" location="bottom start">{{item.Name}} <span v-if="playerArea.trimDishEnabled">，消耗 3 两钱来移除</span>
                            </v-tooltip>
                        </v-chip>
                    </v-card-text>
                    <div style="text-align: center;">
                        <v-btn :disabled="!playerArea.trimDishEnabled" color="primary" rounded @click="playerArea.trimDishCompleted()">不移除</v-btn>
                    </div>
                </v-card>
                <v-card :class="$style.card" color="surface-light" style="width: 12.4rem; height: 7rem;" title="金库">
                    <template v-slot:append>{{money.number.toFixed(0)}} 两钱</template>
                    <v-card-text style="font-size: 1rem;">
                        <MoneyChart :money="money.number"/>
                    </v-card-text>
                </v-card>
            </div>
        </v-sheet>
        <v-sheet :class="$style.sheet" :color="playerArea.selectingShop ? 'rgba(var(--v-theme-warning), 0.2)' : undefined" :elevation="playerArea.selectingShop ? 4: 0" :style="{height : `min(${appStore.wideScreen ? 43.1 : 35.1}rem, 100%)`}" border rounded>
            <div :class="$style['scroll-container']" style="overflow-x:auto; flex-wrap: wrap; padding-bottom: 0;">
                <ShopCard v-for="(item, index) in playerArea.shopOwned" :key="index" :class="$style.card" :enabled="playerArea.selectingShop" :shop="item" @click="playerArea.selectShop(index);"/>
                <v-card v-for="(item, index) in defaultClearShopGroundPrice.slice(playerArea.shopOwned.length)" :class="$style.card" :title="`未建造店铺 ${index + 1 + playerArea.shopOwned.length}`" color="surface-light">
                    <v-card-text>
                        清理费用：{{item}}
                    </v-card-text>
                </v-card>
            </div>
        </v-sheet>
    </div>
</template>

<style module>
.sheet {
    position: relative;
    max-height: 100%;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.scroll-container {
    height: calc(100% - 1rem);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    margin-top: 0.5rem;
    padding: 0 0.5rem 0.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.card {
    overflow: hidden;
    width: 16.4rem;
    height: 10rem;
    flex-shrink: 0;
}

@media screen and (max-width: 840px), (max-height: 840px) {
    .card {
        width: 12rem;
        height: 8rem;
    }
}

.chipRotateX {
    animation: chipRotateX 1s;
}

@keyframes chipRotateX {
    50% {
        transform: rotateX(180deg);
    }
    100% {
        transform: rotateX(360deg);
    }
}
</style>